<template>
	<div>
		<nav class="BreadcrumbBlock">
			<div class="flex">
				<div class="BreadItem" @click="$router.push('/stand')">品牌规范</div>
				<div class="BreadItem active">新建规范</div>
			</div>
		</nav>
		<div id="addStandardPage"  class="contentBox">
			<h3 class="center">欢迎创建新规范</h3>
			<section class="standardFormData">
				<el-form ref="form"  label-width="120px">
				  <el-form-item label="规范名称" placeholder=''>
						<el-input v-model="standardObj.name" size="small" placeholder="例如：QQ品牌视觉规范，QQ空间UI规范等..."></el-input>
				  </el-form-item>
				  <el-form-item label="规范域名">
						<el-input v-model="standardObj.domain" size="small"  placeholder="3-12位英文，用于生成域名进行传播"></el-input>
				  </el-form-item>
				  <el-form-item label="规范类型">
						<el-select v-model="standardObj.type" size="small" placeholder="请选择规范类型">
							<el-option label="品牌规范" value="1"></el-option>
							<el-option label="体验规范" value="2"></el-option>
						</el-select>
						<el-select v-model="standardObj.category_id" size="small" placeholder="请选择规范分类">
							<el-option v-for='(item,index) in standardCategory' :label="item.name" :value="item.id"></el-option>
						</el-select>
				  </el-form-item>
				  <el-form-item label="所属部门">
						<el-select v-model="standardObj.dept" size="small" placeholder="请选择所属BG" @change="changeDepart()">
							<el-option :label="item.deptname" :value="item.id" v-for='(item,index) in departList'></el-option>
						</el-select>
						<el-select v-model="standardObj.dept_id" size="small" placeholder="请选择所属部门">
							<el-option v-for='(item,index) in subDepartList' :label="item.deptname" :value="item.id"></el-option>
						</el-select>
				  </el-form-item>
				  <el-form-item label="管理员">
					<section class="flex align-center">
						<div class="staffBox" @click="memberType='admin',dialogTableVisible=true">
							<div class="staffAvar">
								<img src="../../assets/images/front/addFile.svg" >
							</div>
							<p class="staffName">添加人员</p>
						</div>
						<ul class="flex">
							<li v-for="(item,index) in admin_submit_data" class="staffBox">
								<div class="staffAvar">
									<img class="deleteImg none" src="../../assets/images/front/person_delete.png" @click="admin_submit_data.splice(index,1)" alt="">
									<div class="hidden">
										<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" >
									</div>
								</div>
								<p class="staffName">{{item.wx_name}}</p>
							</li>
						</ul>
					</section>
					<!-- <el-cascader
						placeholder="请输入搜索"
						:options="userList"
						v-model='standardObj.admin_list'
						size="small"
						:props="{ multiple: true }"
						filterable>
					</el-cascader> -->
				  </el-form-item>
				  <el-form-item label="规范成员">
					<section class="flex align-center">
						<div class="staffBox" @click="memberType='member';dialogTableVisible=true">
							<div class="staffAvar">
								<img src="../../assets/images/front/addFile.svg" >
							</div>
							<p class="staffName">添加人员</p>
						</div>
						<ul class="flex">
							<li v-for="(item,index) in member_submit_data" class="staffBox">
								<div class="staffAvar">
									<img class="deleteImg none" src="../../assets/images/front/person_delete.png" @click="member_submit_data.splice(index,1)" alt="">
									<div class="hidden">
										<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" >
									</div>
								</div>
								<p class="staffName">{{item.wx_name}}</p>
							</li>
						</ul>
					</section>
					<!-- <el-cascader
						placeholder="请输入搜索"
						:options="userList"
						v-model='standardObj.member_list'
						size="small"
						:props="{ multiple: true }"
						filterable>
					</el-cascader> -->

				  </el-form-item>
				 <el-form-item label="授权部门">
					<section class="flex align-start" style="margin-top:9px;">
						<div class="addDeptText" @click="dialogDeptVisible=true">添加</div>
						<div class="member_checked_data deptDataFormBox flex flex-wrap" >
							<div v-for="(item,index) in dept_submit_data" class="flex justify-center align-center mw-1-impt">
								{{item.deptname}}
								<i class="el-icon-close none" @click="dept_submit_data.splice(index,1)"></i>
							</div>
						</div>
					</section>
					<div>
						被授权的部门拥有查看、修改本规范所有内容的权限
					</div>
				 </el-form-item>
				 <el-form-item label="规范封面">
					<input type="file" id="CoverImg" class="none" @change='uploadImg($event)'>
					<label for="CoverImg" v-if='!standardObj.covar_path'>
						<div class="coverUploadBox">
							<section class="center">
								<i class="el-icon-plus"></i>
								<p>建议上传 238*180px <br/> 带底色图片</p>
							</section>
						</div>
					</label>
					<div id="CoverImgBox" v-else>
						<img :src="standardObj.covar_path" >
					</div>
				 </el-form-item>
				  <el-form-item label="权限设置">
					<div>
						<input type="radio" id="authPublic" value="1" v-model="standardObj.auth_status">
						<label for="authPublic"><b>公开</b></label>
						&nbsp;<span>对所有人公开</span>
					</div>
					<div>
						<input type="radio" id="authPrivat" value="0" v-model="standardObj.auth_status"/>
						<label for="authPrivat"><b>保密</b></label>
						&nbsp;<span>仅对项目成员访问</span>
					</div>
				  </el-form-item>
				  
				  <el-form-item>
					<el-button class="submitBtn" type="primary" @click="saveStand()">提交</el-button>
				  </el-form-item>
				</el-form>
			</section>
		</div>


		
		<el-dialog  :visible.sync="dialogTableVisible" :show-close='false' width='556px' >
			
			<div class="flex" style="height:512px">
				<aside style="width:220px;border-right:1px solid rgba(0,0,0,0.08)">
					<header class="m-1">
						<el-input
							size='medium'
							placeholder="搜索成员"
							prefix-icon="el-icon-search"
							v-model='member_keyword'
							@keyup.native="searchMember()"
						>
						</el-input>
					</header>
					<ul class="member_rusult_data">
						<li v-for='(item,index) in member_result_list' class="flex align-center" @click="checkedMember(item)">
							<img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt="">
							<span>{{item.wx_name}}</span>
						</li>
					</ul>
				</aside>
				<section style="position:relative" class="flex-1">
					<h5 style="margin-top:19px;margin-left:16px;font-size:16px;font-weight:500">已选择的成员</h5>
					<div class="member_checked_data flex flex-wrap" >
						<div v-for="(item,index) in member_checked_data" class="flex justify-center align-center">
							{{item.wx_name}}
							<i class="el-icon-close none" @click="member_checked_data.splice(index,1)"></i>
						</div>
					</div>
					<footer style="position:absolute;bottom:0;left:0;width:100%;padding:16px;box-sizing:border-box;" class="search-footer flex align-center justify-between">
						<div>
							<el-link type="primary" :underline="false" @click="member_checked_data=[]"  v-show="member_checked_data.length>0">取消全选</el-link>
						</div>
						<div>
							<button class="cancelButton" @click="cancelMember();">取消</button>
							<button class="submitButton"  @click="sumbitMember();">提交</button>
						</div>
					</footer>
				</section>
			</div>
		</el-dialog>

		<el-dialog  :visible.sync="dialogDeptVisible" :show-close='false' width='556px' >
			<div class="flex" style="height:512px">
				<aside style="width:220px;border-right:1px solid rgba(0,0,0,0.08)">
					<header class="m-1">
						<el-input
							size='medium'
							placeholder="搜索部门"
							prefix-icon="el-icon-search"
							v-model='dept_keyword'
							@keyup.native="searchDept()"
						>
						</el-input>
					</header>
					<ul class="member_rusult_data" v-if="dept_keyword">
						<li v-for='(item,index) in dept_result_list' class="flex align-center" @click="changeDept(item);">
							<!-- <img src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""> -->
							<span>{{item.deptname}}</span>
						</li>
					</ul>
					<menu id="deptMenuBox" v-else>
						<div v-for="(item1,index1) in departList">
							<div class="deptMenuTitle1 deptMenuTitle flex align-center">
								<i class="el-icon-check i-check" :class="{'show':item1.checked}"></i>
								<span @click="changeDept(item1);">{{item1.deptname}}</span>
								<i class=" i-arrow" :class="{'el-icon-arrow-up':!item1.showFlag,'el-icon-arrow-down':item1.showFlag}" v-show="item1.children" @click="item1.showFlag=!item1.showFlag"></i>
							</div>
							<article class="deptMenuData2" v-if="item1.children && item1.children.length>0 && item1.showFlag">
								<div v-for="(item2,index2) in item1.children">
									<div class="deptMenuTitle2 deptMenuTitle flex align-center">
										<i class="el-icon-check i-check" :class="{'show':item2.checked}"></i>
										<span @click="changeDept(item2);">{{item2.deptname}}</span>
										<i class=" i-arrow" :class="{'el-icon-arrow-up':!item2.showFlag,'el-icon-arrow-down':item2.showFlag}" v-show="item2.children" @click="item2.showFlag=!item2.showFlag"></i>
									</div>
									<article class="deptMenuData3" v-if="item2.children && item2.children.length>0 && item2.showFlag">
										<div v-for="(item3,index3) in item2.children">
											<div class="deptMenuTitle3 deptMenuTitle flex align-center">
												<i class="el-icon-check i-check" :class="{'show':item3.checked}"></i>
												<span @click="changeDept(item3);">{{item3.deptname}}</span>
												<i class=" i-arrow" :class="{'el-icon-arrow-up':!item3.showFlag,'el-icon-arrow-down':item3.showFlag}" v-show="item3.children" @click="item3.showFlag=!item3.showFlag"></i>
											</div>
											<article class="deptMenuData4" v-if="item3.children && item3.children.length>0 && item3.showFlag">
												<div v-for="(item4,index4) in item3.children">
													<div class="deptMenuTitle4 deptMenuTitle flex align-center">
														<i class="el-icon-check i-check" :class="{'show':item4.checked}"></i>
														<span @click="changeDept(item4);">{{item4.deptname}}</span>
														<i class=" i-arrow" :class="{'el-icon-arrow-up':!item4.showFlag,'el-icon-arrow-down':item4.showFlag}" v-show="item4.children" @click="item4.showFlag=!item4.showFlag"></i>
													</div>
													<article  class="deptMenuData5" v-if="item4.children && item4.children.length>0 && item4.showFlag">
														<div v-for="(item5,index5) in item4.children">
															<div class="deptMenuTitle5 deptMenuTitle flex align-center">
																<i class="el-icon-check i-check" :class="{'show':item5.checked}" ></i>
																<span @click="changeDept(item5);">{{item5.deptname}}</span>
																<i class=" i-arrow" :class="{'el-icon-arrow-up':!item5.showFlag,'el-icon-arrow-down':item5.showFlag}" v-show="item5.children" @click="item5.showFlag=!item5.showFlag"></i>
															</div>
														</div>
													</article>
												</div>
											</article>
										</div>
									</article>
								</div>
							</article>
						</div>
					</menu>
				</aside>
				<section style="position:relative" class="flex-1">
					<h5 style="margin-top:19px;margin-left:16px;font-size:16px;font-weight:500">已选择的成员</h5>
					<div class="member_checked_data flex flex-wrap" >
						<div v-for="(item,index) in dept_checked_data" class="flex justify-center align-center">
							{{item.deptname}}
							<i class="el-icon-close none" @click="delDeptItem(item,index);"></i>
						</div>
					</div>
					<footer style="position:absolute;bottom:0;left:0;width:100%;padding:16px;box-sizing:border-box;" class="search-footer flex align-center justify-between">
						<div>
							<el-link type="primary" :underline="false" @click="cancelAllDept();"  v-show="dept_checked_data.length>0">取消全选</el-link>
						</div>
						<div>
							<button class="cancelButton" @click="cancelDeptData()">取消</button>
							<button class="submitButton" @click="submitDeptData()">提交</button>
						</div>
					</footer>
				</section>
			</div>
		</el-dialog>


		<div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>
	</div>
	
</template>

<script>
import {deepCopy} from '@/utils/index.js'
import _ from 'lodash'

export default {
	name:'addStandard',
    data() {
      return {
        standardObj:{
			name:'',
			domain: "",
			type:'',
			category_id:'',
			// dept:'',
			dept_id:'',
			admin_list:[],
			member_list:[],
			auth_dept:[],
			covar_path:"",
			auth_status:1,
			status:0,
			user_id:''
		},
		departList:[
			{
				id:1,
				deptname:'PCG平台与内容事业群',
				parent_id:0,
				checked:false,
				showFlag:true,
				children:[
					{
						id:101,
						deptname:'公共事业部',
						parent_id:1,
						checked:false,
						showFlag:true,
					},
					{
						id:102,
						deptname:'联络中心',
						parent_id:1,
						checked:false,
						showFlag:true,
						children:[
							
							{
								id:1020101,
								deptname:'运营中心',
								parent_id:10201,
								checked:false,
								showFlag:true,
								children:[
									{
										id:102010101,
										deptname:'运营一组',
										parent_id:1020101,
										checked:false,
										showFlag:true,
										children:[]
									},
									{
										id:102010102,
										deptname:'运营二组',
										parent_id:1020101,
										checked:false,
										showFlag:true,
									},
									{
										id:102010103,
										deptname:'运营三组',
										parent_id:1020101,
										checked:false,
										showFlag:true,
									},
									{
										id:102010104,
										deptname:'运营四组',
										parent_id:1020101,
										checked:false,
										showFlag:true,
									},
									{
										id:102010105,
										deptname:'运营五组',
										parent_id:1020101,
										checked:false,
										showFlag:true,
									}
								]
							}
								
						]
					}
				]
			}
		],
		subDepartList:[],
		dialogDeptVisible:false,
		dept_keyword:'',
		dept_result_list:[],
		dept_checked_data:[],
		dept_submit_data:[],

		userList:[],
		standardCategory:[],//规范分类
		dialogTableVisible:false,
		memberType:'',
		member_result_list:[], //成员搜索结果数据
		member_checked_data:[], //选中的成员数据,
		member_submit_data:[], //选中的成员数据,
		admin_submit_data:[], //选中的成员数据,
		member_keyword:'',
		toastFlag:false,
		toastMsg:'',
		isSubmit:true,
      }
    },
	mounted(){
		// this.getDepart();
		this.getUser();
		this.getCategory();
		this.standardObj.user_id = this.$store.state.userInfo.user_id
	},
    methods: {
      	// getDepart(){
		// 	let that = this;
		// 	that.departList = [];
        //     this.$axios.get('/api/department/list').then((res)=>{
		// 		if(res.data.data && res.data.data.length>0){
		// 	  		that.departList = that.formDepart(res.data.data)
		// 		}
        //     })
	  	// },
		getCategory(){ //获取规范分类
            let that = this;
            that.standardCategory = []
            this.$axios.get('/api/standard/category').then((res)=>{
               that.standardCategory = res.data.data
            })
        },
		// formDepart(arr){
		// 	let that = this;
		// 	arr.forEach((item,index)=>{
		// 		item.label = item.department_name;
		// 		item.value = item.id;
		// 		if(item.children && item.children.length>0) {
		// 			that.formDepart(item.children)
		// 		}else{
		// 			delete item.children
		// 		}
		// 	})
		// 	return arr;
		// },
		changeDepart(){	//切换部门
			let that = this;
			let id = this.standardObj.dept;
			this.departList.forEach((item,index)=>{
				if(item.id === id) {
					that.subDepartList = item.children;
					return;
				}
			})
		},
		getUser(){	//获取所有成员
			let that = this;
			that.userList = [];
            this.$axios.get('/api/member/list').then((res)=>{
			   if(res.data.data && res.data.data.length>0){
				   	res.data.data.forEach((item,index)=>{
					   item.label = item.wx_name;
					   item.value = item.id
				   	})
					that.userList = res.data.data;
			   }
            })
		},
		searchMember(){	//搜索成员
			let that = this;
			that.member_result_list = []
			if(this.member_keyword){
				this.userList.forEach((item,index)=>{
					if(item.wx_name.indexOf(that.member_keyword) != -1){
						that.member_result_list.push(item)
					}
				})
			}
		},
		checkedMember(item){	//选择成员
			if(!this.member_checked_data.includes(item)){
				this.member_checked_data.push(item)
			}
		},
		cancelMember(){	//取消成员
			this.dialogTableVisible=false;
			this.member_result_list=[];
			this.member_checked_data=[];
			this.member_keyword=''
		},
		sumbitMember(){	//提交成员
			if(this.memberType === 'member'){
				this.member_submit_data = deepCopy(this.member_checked_data)
				// this.member_submit_data = Array.from(new Set([...this.member_submit_data, ...deepCopy(this.member_checked_data)]))
			}else{
				this.admin_submit_data = deepCopy(this.member_checked_data)
				// this.admin_submit_data = Array.from(new Set([...this.admin_submit_data, ...deepCopy(this.member_checked_data)]))
			}
			
			this.cancelMember()
		},
		searchDept(){	//搜索部门
			let that = this;
			that.dept_result_list = []
			searchDeptData(this.departList);
			function searchDeptData(data){
				data.forEach((item,index)=>{
					if(item.deptname.indexOf(that.dept_keyword) != -1){
						that.dept_result_list.push(item);
					}
					if(item.children && item.children.length>0){
						searchDeptData(item.children)
					}
				})
			}
			
		},
		changeDept(item){	//选择部门
			// let newArr = [];
			item.checked = !item.checked;
			// console.log(item.checked)
			function checkedDept(arr,isChecked){
				arr.forEach((val,i)=>{
					val.checked = isChecked;
					if(val.children && val.children.length>0) checkedDept(val.children,isChecked)
				})
			}
			if(item.children && item.children.length>0){

				if(item.checked){
					checkedDept(item.children,true)
					// newArr.push(item)
				}else{
					checkedDept(item.children,false)
				}
			}

			// deptCheckFn(this.departList)
			// function deptCheckFn(data){
			// 	data.forEach((deptItem)=>{
			// 		if(deptItem.checked) newArr.push(deptItem);
			// 		if(deptItem.children && deptItem.children.length>0) deptCheckFn(deptItem.children);
			// 	})
			// }
			
			this.dept_checked_data = this.deptCheckFn();
		},
		deptCheckFn(){
			let Arr = [];
			forFn(this.departList);
			function forFn(data){
				data.forEach((deptItem)=>{
					if(deptItem.checked) Arr.push(deptItem);
					if(deptItem.children && deptItem.children.length>0) forFn(deptItem.children);
				})
			}
			return Arr
		},
		delDeptItem(item,index){	//删除部门
			item.checked = false;
			if(item.children && item.children.length>0){
				delDept(item.children);
			}
			function delDept(data){
				data.forEach((val)=>{
					// if(val.id === item.id){
						val.checked = false
						// return;
					// }
					if(val.children&&val.children.length>0) delDept(val.children)
				})
			}
			this.dept_checked_data = this.deptCheckFn();
			// if(index!=-1){
			// 	this.dept_checked_data.splice(index,1)
			// }
			
		},
		cancelAllDept(){	//取消全选部门
			this.dept_checked_data=[];
			cancelDept(this.departList);
			function cancelDept(data){
				data.forEach((val)=>{
					val.checked = false;
					if(val.children&&val.children.length>0) cancelDept(val.children)
				})
			}
		},
		cancelDeptData(){	//取消部门，并关闭弹窗
			this.dialogDeptVisible=false;
			this.dept_result_list=[];
			this.dept_checked_data=[];
			this.dept_keyword='';
			this.cancelAllDept()
		},
		submitDeptData(){	//提交选择部门
			this.dept_submit_data =deepCopy(this.dept_checked_data)
			// this.dept_submit_data = Array.from(new Set([...this.dept_submit_data, ...deepCopy(this.dept_checked_data)]))
			this.cancelDeptData()
		},
		uploadImg(e){	//上传图片
			let that = this;
			let file = e.target.files[0];
			let fileName = file.name;
			let data = new FormData()
			data.append('coverImg', fileName)
			data.append('img', file)
			this.$axios.post('/api/uploadFile',data).then((res)=>{
				if(res.data.code == 200){
					that.standardObj.covar_path = res.data.src
					that.$set(that.standardObj,that.standardObj.covar_path,res.data.src)
					let img = new Image()
					img.src = res.data.src;
					img.onload = function(){
						let width = img.width
						let height = img.height
						if(width!=238 || height!= 180){
							that.toastFlag = true;
							that.toastMsg = '请按规定尺寸上传';
							that.standardObj.covar_path = ''
							setTimeout(function(){
								that.toastFlag = false;
							},2000)
						}
					}
					
				}
			})
		},
		saveStand:_.throttle(function(){ //保存规范
		
			let that = this;
			
			let dataArr = deepCopy(this.standardObj);
			dataArr.dept_id=1;
			dataArr.member_list = deepCopy(this.member_submit_data);
			dataArr.admin_list = deepCopy(this.admin_submit_data);
			dataArr.auth_dept = deepCopy(this.dept_submit_data);
			if(dataArr.admin_list.length>0){
				let d = dataArr.admin_list.map((item)=>{
					return item.id
				})
				dataArr.admin_list = ','+ d.toString() + ',' + dataArr.user_id+','
			}else{
				dataArr.admin_list = ','+ dataArr.user_id+','
			}

			if(dataArr.member_list.length>0){
				let d = dataArr.member_list.map((item)=>{
					return item.id
				})
				dataArr.member_list = ','+ d.toString() +','
			}else{
				dataArr.member_list = ''
			}

			if(dataArr.auth_dept.length>0){
				let d = dataArr.auth_dept.map((item)=>{
					return item.id
				})
				dataArr.auth_dept =','+ d.toString()+','
			}else{
				dataArr.auth_dept = ''
			}

			let {name,
			domain,
			type,
			category_id,
			dept_id,
			admin_list,
			member_list,
			auth_dept,
			covar_path,
			auth_status} = dataArr;


			if(!name || !domain || !type || !category_id || !dept_id || !admin_list || !auth_dept || !auth_status){
				this.toastMsg = '请完善信息后再提交'
				this.toastFlag = true;
				setTimeout(function(){
					that.toastFlag = false
				},1000)
				return;
			}


			if(!this.isSubmit) return;
			this.isSubmit = false;
	
			this.$axios.post('/api/standard/add',dataArr).then((res)=>{
				that.isSubmit = true;
				if(res.data.code == '200'){
					that.toastMsg = res.data.message;
					that.toastFlag = true;
					setTimeout(function(){
						that.toastFlag = false;
					},1000)
					that.$router.push({
						path:'/standDetail',
						query:{
							id:res.data.id
						}
					})
				}
			})

		},2000)
    }
  }
</script>

<style lang="less" scoped>

	/deep/ .el-dialog{
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		margin: 0 auto 50px !important;
	}
	/deep/ .el-form-item__label{
		padding-right: 42px;
	}
	/deep/ .el-input__inner{
		border-radius: 22px;
	}
	/deep/ .el-form-item{
		margin-bottom: 35px;
	}
	/deep/ .el-form-item__label{
		font-size: 16px;
		color: #000;
		font-weight: 400;
	}
	/deep/ .submitBtn{
		width: 104px;
		height: 50px;
		background: #0064FF;
		border-radius: 25px;
		color: #fff;
		font-size: 20px;
	}

	/deep/.el-dialog__header{
		padding: 0;
	}
	/deep/ .el-dialog__body{
		padding: 0;
	}
	
	#addStandardPage{
		h3{
			font-weight: 500;
			font-size: 32px;
			color: #000000;
			letter-spacing: 0;
			line-height: 32px;
			opacity: 0.95;
			margin-bottom: 80px;
		}
		
		.standardFormData{
			margin: 0 auto;
			width: 910px;
			/deep/ .el-select{
				width: 258px;
				margin-right: 16px;
			}
		}
	}
	.addDeptText{
		font-size: 14px;
		color: #0064FF;
		line-height: 22px;
		opacity: .95;
		cursor: pointer;
	}
	.staffBox{
		margin:0 16px;
		margin-top: -11px;
		.staffAvar{
			width: 58px;
			height: 58px;
			border-radius: 50%;
			position: relative;
			cursor: pointer;
			// background: rgba(0,0,0,0.10);
			div{
				width: 100%;
				height: 100%;
				overflow: hidden;
				border-radius: 50%;
			}
			// overflow: hidden;
			.deleteImg{
				position: absolute;
				left: 1px;
				top: 4px;
			}
			img{
				width: 100%;
				overflow: hidden;
			}
		}
		p{
			font-size: 14px;
			color: #000000;
			letter-spacing: 0;
			line-height: 22px;
			margin-top: 10px;
			text-align: center;
		}
	}
	.staffBox:hover{
		.deleteImg{
			display: block;
		}
	}

	.member_rusult_data li{
		height: 34px;
		padding: 7px 24px;
		cursor: pointer;
	}
	.member_rusult_data li:hover{
		background: #F5F7FA;
	}
	.member_rusult_data li img{
		width: 20px;
		height: 20px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 8px;
	} 
	.member_checked_data{
		margin: 20px 16px;
	}
	.member_checked_data>div{
		min-width: 77px;
		padding: 0 9px;
		border: 1px solid #E3E3E3;
		border-radius: 100px;
		background: #F4F5F8;
		font-size: 14px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		margin-right: 10px;
		margin-bottom: 10px;
		cursor: pointer;
		position: relative;
		i{
			margin-left: 5px;
			margin-right: 2px;
		}
	}
	.member_checked_data>div:hover{
		background: #fff;
		i{
			display: block;
		}
	}
	.deptDataFormBox{
		margin: 0 !important;
		margin-left: 20px !important;
	}
	.deptDataFormBox>div{
		margin-bottom: 5px !important;
	}

	#deptMenuBox{
		cursor: pointer;
		padding: 12px 0;
		// padding-right: 12px;
		color: #000;
		font-size: 14px;
		line-height: 22px;
		// .deptMenuData2,.deptMenuData3,.deptMenuData4,.deptMenuData5{
		// 	padding-left: 22px;
		// }
		.deptMenuTitle1{
			padding-left: 12px;
		}
		.deptMenuTitle2{
			padding-left: 34px;
		}
		.deptMenuTitle3{
			padding-left: 56px;
		}
		.deptMenuTitle4{
			padding-left: 78px;
		}
		.deptMenuTitle5{
			padding-left: 100px;
		}
		.deptMenuTitle{
			height: 34px;
			position: relative;
			/deep/.i-check{
				font-size: 16px;
				opacity: 0;
				color: #0064FF;
				margin-right: 10px;
			}
			/deep/ .i-check.show{
				opacity: 1;
			}
			/deep/ .i-arrow{
				position: absolute;
				right: 12px;
				margin-left: 5px;
			}
		}
		.deptMenuTitle:hover{
			background: #F5F7FA;
		}

	}

	.search-footer {
		/deep/ .el-link.el-link--primary{
			color: #0064FF;
		}
		.cancelButton{
			background: #666666;
		}
		.submitButton{
			background: #0064FF;
			margin-left: 8px;
		}
	}

	.coverUploadBox{
		border: 1px dashed #ddd;
		border-radius: 5px;
		width: 238px;
		height: 180px;
		padding-top: 54px;
    	box-sizing: border-box;
		section{
			margin-bottom: 15px;
		}
		i{
			font-size: 40px;
			color: #ddd;
		}
		p{
			line-height: 20px;
			margin-top: 18px;

		}
	}
	#CoverImgBox{
		width: 280px;
		height: 150px;
		img{
			max-width: 100%;
			max-height: 100%;
		}
	}
	
	
</style>
